/*
 * @Description: EEP格式包上传
 * @Author: Zzt
 * @Date: 2022-10-18 14:42:25
 * @LastEditTime: 2022-10-27 20:45:14
 */
import { Button, Col, Modal, Row, Space, Table, Typography, Upload } from 'antd';
import styles from '../../styles/linkDialog.module.scss';
import classNames from 'classnames/bind';
import { delItemById, delItemByIdArray } from '@/utils/list';
import { ColumnsType } from 'antd/es/table';
import { byteConvert, jsonClone } from '@/utils';
import { useStandardizedDetectionContext } from '../../contexts/StandardizedDetectionContext';
import Column from 'antd/es/table/Column';
import { useState } from 'react';
import { IUploadResourceResponse, uploadResource } from '@/api/upload';
import { useFormatMessage } from '@/utils/intlHelpers';

const cx = classNames.bind(styles);

interface DataType {
  key: string;
  name: string;
}

const UploadEEP = (props: any) => {
  const { activeStandardized, updateStandardizedList, selectAT, selectFond } =
    useStandardizedDetectionContext();
  const { onClose, visible } = props;
  // 选中文件列表
  const [uploadList, setUploadList] = useState([]);
  const [uploadTableLoading, setUploadTableLoading] = useState(false);
  const formatMessage = useFormatMessage();

  /**
   * @description: upload组件上传前钩子，处理选中的文件列表
   * @param {File} file
   */
  const beforeUpload = (file: File) => {
    setUploadList((state) => [...state, file]);
    // return false;
  };
  /**
   * @description: 从【已选择文件】列表中删除条目
   * @param {string} key
   */
  const delUploadItem = (key: string): void => {
    setUploadList(delItemById(key, uploadList, 'uid'));
  };

  /**
   * @description: 从【已选择文件】列表中删除条目
   */
  const clearUploadList = (): void => {
    setUploadList([]);
  };
  /**
   * @description: 上传选中的文件
   * @param {File[]} fileList
   * @param {'batch' | 'single'} type 上传类型，批量上传还是单个文件上传
   */
  // const uploadFileFunc = (fileList: File[], type?: 'batch' | 'single'): void => {
  //   if (type === 'batch') {
  //     setUploadTableLoading(true);
  //   }
  //   const formData = new FormData();
  //   fileList.forEach((file: File) => {
  //     formData.append('files', file);
  //   });

  //   uploadResource(formData)
  //     .then((res: any) => {
  //       const fileList: IUploadResourceResponse[] = res.data;
  //       const { commonParams, atCode, atType, level } = query;
  //       const params = {
  //         commonParams,
  //         file_id: info.id,
  //         coordinate: {
  //           atCode,
  //           atType,
  //           level
  //         },
  //         originalFileBeanList: fileList.map((item, idx) => ({
  //           file_ext: item.ext,
  //           file_name: item.name,
  //           file_path: item.path,
  //           file_size: item.size,
  //           file_url: item.url,
  //           sort_no: idx + 1
  //         }))
  //       };
  //       addERecords(params)
  //         .then((res: any) => {
  //           const data = res.data || [];
  //           addTableItem(data[0]);
  //           setLinkedList((state: any) => [...state, ...data]);
  //           clearUploadList();
  //         })
  //         .finally(() => {
  //           setUploadTableLoading(false);
  //         });
  //     })
  //     .finally(() => {
  //       setUploadTableLoading(false);
  //     });
  // };
  const onCancel = () => {
    setUploadList([]);
    onClose();
  };
  return (
    <Modal
      visible={visible}
      title="EEP格式包上传"
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          关闭
        </Button>,
        <Button
          key="submit"
          type="primary"
          onClick={() => {
            // uploadFileFunc(uploadList, 'batch');
            onCancel();
          }}
        >
          保存
        </Button>
      ]}
    >
      <div className={cx('uploaded')}>
        <p>
          全宗:{selectFond.fondName} - 档案类型{''}:{selectAT.atName}
        </p>
        <div className={cx('table-operate')}>
          <h6>EEP格式包列表</h6>
          <Space>
            <Upload beforeUpload={beforeUpload} customRequest={() => {}} fileList={[]} multiple>
              <Button type="link">点击上传</Button>
            </Upload>
            <Button onClick={clearUploadList} type="link">
              清空
            </Button>
          </Space>
        </div>

        <Table
          size="small"
          dataSource={uploadList}
          rowKey="uid"
          loading={uploadTableLoading}
          scroll={{ y: 300 }}
          bordered
        >
          <Column title="序号" dataIndex="name" key="name" align="center"></Column>
          <Column
            title="文件"
            dataIndex="size"
            key="size"
            align="center"
            render={(size: number) => byteConvert(size)}
          ></Column>
          <Column
            title={formatMessage('tableAction')}
            key="action"
            align="center"
            render={(_text, record: any) => (
              <Space>
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    delUploadItem(record.uid);
                  }}
                >
                  删除
                </Button>
                <Button
                  type="link"
                  onClick={() => {
                    // uploadFileFunc([record]);
                  }}
                >
                  重新上传
                </Button>
              </Space>
            )}
          />
        </Table>
      </div>
    </Modal>
  );
};
export default UploadEEP;
